<template>
    <div class="share">
        <van-tabs v-model="dynamic" color="#23b7cb" animated>
            <van-tab title="大厅">
                <div class="message" v-for="item in shareList" :key="item._id">
                    <van-row class="editer">
                        <van-col span="2" class="img"> </van-col>
                        <van-col>
                            <p class="username">
                                {{ item.user_id ? item.user_id.username : "" }}
                            </p>
                            <span class="time">{{ item.dateTime }}</span>
                        </van-col>
                        <van-col class="likes-people" v-if="item.user_id">
                            <van-button
                                v-if="
                                    peoplelikes.indexOf(item.user_id._id) === -1
                                "
                                type="primary"
                                @touchstart.stop="likePeople(item.user_id._id)"
                            >
                                关注
                            </van-button>
                            <van-button
                                v-else
                                plain
                                type="primary"
                                @touchstart.stop="
                                    dislikePeople(item.user_id._id)
                                "
                            >
                                已关注
                            </van-button>
                        </van-col>
                    </van-row>
                    <van-row>
                        <van-col span="24" class="word">
                            {{ item.content }}
                        </van-col>
                    </van-row>
                    <template v-if="item.music_id">
                        <van-row class="content">
                            <van-col span="4">
                                <img :src="item.music_id.pic_url" alt="" />
                            </van-col>
                            <van-col span="16" offset="1">
                                <p class="title">
                                    {{ item.music_id.name }}
                                </p>
                                <p class="name">
                                    {{ item.music_id.artist }}
                                </p>
                            </van-col>
                            <van-col class="button" span="2">
                                <img
                                    v-if="
                                        isPlay &&
                                        playList[0]._id === item.music_id._id
                                    "
                                    @click="pause()"
                                    src="~assets/imgs/global/start.svg"
                                />
                                <img
                                    v-else
                                    @click="play(item.music_id)"
                                    src="~assets/imgs/global/pause.svg"
                                />
                            </van-col>
                        </van-row>
                    </template>
                    <template v-if="item.news_id">
                        <van-row class="content">
                            <van-col span="4">
                                <img :src="item.news_id.pic_url" alt="" />
                            </van-col>
                            <van-col span="16" offset="1">
                                <p class="title">
                                    {{ item.news_id.name }}
                                </p>
                                <p class="name">
                                    {{ item.news_id.artist }}
                                </p>
                            </van-col>
                            <van-col class="button" span="2">
                                <van-button
                                    @touchstart="read(item.news_id._id)"
                                    plain
                                    type="info"
                                    class="look"
                                    size="small"
                                    >点击查看</van-button
                                >
                            </van-col>
                        </van-row>
                    </template>
                </div>
            </van-tab>
            <van-tab title="关注">
                <div
                    class="message"
                    v-for="item in shareListComputed"
                    :key="item._id"
                >
                    <van-row class="editer">
                        <van-col span="2" class="img"> </van-col>
                        <van-col>
                            <p class="username">
                                {{ item.user_id ? item.user_id.username : "" }}
                            </p>
                            <span class="time">{{ item.dateTime }}</span>
                        </van-col>
                        <van-col class="likes-people" v-if="item.user_id">
                            <van-button
                                v-if="
                                    peoplelikes.indexOf(item.user_id._id) === -1
                                "
                                type="primary"
                                @touchstart.stop="likePeople(item.user_id._id)"
                            >
                                关注
                            </van-button>
                            <van-button
                                v-else
                                plain
                                type="primary"
                                @touchstart.stop="
                                    dislikePeople(item.user_id._id)
                                "
                            >
                                已关注
                            </van-button>
                        </van-col>
                    </van-row>
                    <van-row>
                        <van-col span="24" class="word">
                            {{ item.content }}
                        </van-col>
                    </van-row>
                    <template v-if="item.music_id">
                        <van-row class="content">
                            <van-col span="4">
                                <img :src="item.music_id.pic_url" alt="" />
                            </van-col>
                            <van-col span="16" offset="1">
                                <p class="title">
                                    {{ item.music_id.name }}
                                </p>
                                <p class="name">
                                    {{ item.music_id.artist }}
                                </p>
                            </van-col>
                            <van-col class="button" span="2">
                                <img
                                    v-if="
                                        isPlay &&
                                        playList[0]._id === item.music_id._id
                                    "
                                    @click="pause()"
                                    src="~assets/imgs/global/start.svg"
                                />
                                <img
                                    v-else
                                    @click="play(item.music_id)"
                                    src="~assets/imgs/global/pause.svg"
                                />
                            </van-col>
                        </van-row>
                    </template>
                    <template v-if="item.news_id">
                        <van-row class="content">
                            <van-col span="4">
                                <img :src="item.news_id.pic_url" alt="" />
                            </van-col>
                            <van-col span="16" offset="1">
                                <p class="title">
                                    {{ item.news_id.name }}
                                </p>
                                <p class="name">
                                    {{ item.news_id.artist }}
                                </p>
                            </van-col>
                            <van-col class="button" span="2">
                                <van-button
                                    @touchstart="read(item.news_id._id)"
                                    plain
                                    type="info"
                                    class="look"
                                    size="small"
                                    >点击查看</van-button
                                >
                            </van-col>
                        </van-row>
                    </template>
                </div>
            </van-tab>
        </van-tabs>
    </div>
</template>

<script>
import { mapState } from "vuex";
export default {
    name: "Share",
    data() {
        return {
            dynamic: 0,
            shareList: [
                {
                    content: "",
                },
            ],
            likeList: [],
        };
    },
    methods: {
        play(music) {
            this.$store.commit("musicOnePlay", music);
            this.$store.dispatch("musicInit", 0);
        },
        pause() {
            this.$store.commit("pause");
        },
        read(id) {
            let index = 0;
            this.newsList.forEach((item, i) => {
                if (item._id == id) {
                    index = i;
                    this.$store.commit("newsIndex", index);
                    return;
                }
            });
        },
        //关注
        async likePeople(id) {
            if (!this.login) {
                this.$notify({ type: "warning", message: "请先登录" });
                this.$router.push("/signin");
                return;
            }
            if (this.likeList.indexOf(id) !== -1) {
                console.log("已关注");
                return;
            }
            await this.$store.dispatch("likePeople", id);
            await this.$store.dispatch("readMsg");
        },
        async dislikePeople(id) {
            await this.$store.dispatch("dislikePeople", id);
            await this.$store.dispatch("readMsg");
        },
        fetch() {
            this.$axios
                .get("web/share/list")
                .then((data) => {
                    if (data.status === 200) {
                        if (data.data.length === 0) {
                            this.$notify("没有任何数据");
                            return;
                        }
                        this.shareList = data.data;
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        },
    },
    mounted() {
        this.fetch();
    },
    computed: {
        ...mapState(["isPlay", "playList", "peoplelikes", "newsList","login"]),
        shareListComputed() {
            if (!this.shareList[0].user_id) {
                return [];
            }
            let find = this.shareList.filter((i) => {
                return this.peoplelikes.indexOf(i.user_id._id) !== -1;
            });
            console.log(find);
            return find ? find : [];
        },
    },
    // created() {
    //     let socket = new WebSocket("ws://localhost:3000/user");
    //     console.log(socket, "socket");
    //     socket.onopen = function(e) {
    //         console.log(e, "open");
    //         console.log("连接服务成功了");
    //         // socket.send("发送数据");
    //     };
    //     socket.onmessage = function(msg) {
    //         console.log(msg, "msg");
    //         socket.send("发送数据");
    //         socket.close();
    //         console.log("服务发送来消息");
    //     };
    //     socket.onerror = function(e) {
    //         console.log(e, "错误");
    //         // 关闭 websocket
    //         console.log("websocket错误");
    //     };
    //     socket.onclose = function(e) {
    //         console.log(e, "关闭");
    //         // 关闭 websocket
    //         console.log("websocket关闭");
    //     };
    // },
};
</script>

<style lang="less" scoped>
.share {
    width: 80%;
    flex: 1;
    font-size: 0.3rem;
    margin: 0 auto;
    overflow-y: scroll;
    margin-bottom: 1.3rem;
    .message {
        width: 100%;
        margin: 0.2rem 0;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid #999999;
        line-height: 0.3rem;
        &:last-child {
            border: none;
        }
        .editer {
            height: 0.6rem;
            font-size: 0.2rem;
            .img {
                width: 0.6rem;
                height: 0.6rem;
                margin-right: 0.1rem;
                background-image: url("~assets/imgs/global/a.jpg");
                background-size: cover;
                background-position: center center;
                background-repeat: no-repeat;
            }
            .likes-people {
                float: right;
                padding: 0;
                .van-button {
                    width: 1rem;
                    height: 0.5rem;
                    padding: 0;
                    .van-button__text {
                        font-size: 0.2rem;
                    }
                }
            }
        }
        .word {
            max-height: 0.8rem;
            line-height: 0.4rem;
            margin: 0.1rem;
            overflow: hidden;
        }
        .content {
            height: 1rem;
            line-height: 0.5rem;
            border: 1px transparent solid;
            border-image: linear-gradient(to right, #000718, #14b5ca) 10 10;
            .title{
                width: 85%;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            img {
                height: 1rem;
            }
            .button img {
                display: block;
                width: 0.6rem;
            }
            .button .look{
                width: 1.4rem;
                height: 0.6rem;
                margin-left: -0.8rem;
                margin-top: 0.2rem;
            }
        }
    }
}
</style>
